<template>
    <div class="main-box">
        <div class="title">用户管理</div>
        <div class="operation">
            <div class="user-operation">
                <el-form ref="queryFormRef" :model="queryData.data" inline style="display:flex; justify-content: flex-end;">
                    <el-form-item style="margin-right: 1em;" prop="nickname">
                        <el-input v-model="queryData.data.nickname" clearable style="width: 200px;" placeholder="请输入昵称">
                            <template v-slot:prefix>
                                <i class="iconfont icon-sousuo"></i>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item style="margin-right: 1em;" class="el-form-item-time">
                        <el-date-picker v-model="queryData.data.startTime" type="date" placeholder="开始时间"
                            value-format="YYYY-MM-DD 00:00:00" />
                        <span class="h-line">-</span>
                        <el-date-picker v-model="queryData.data.endTime" type="date" placeholder="结束时间"
                            value-format="YYYY-MM-DD 23:59:59" />
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="getUserPage" type="primary"><i class="iconfont icon-sousuo"
                                style="margin-right: 5px;"></i>搜索</el-button>
                        <el-button @click="resetForm" type=""><i class="iconfont icon-zhongzhi"
                                style="margin-right: 5px;"></i>重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="table-box" style="height:calc(100% - 150px);">
            <el-table v-loading="tableLoading" :data="tableData" border height="100%">

                <el-table-column label="编号" align="center" width="80">
                    <template #default="scope">
                        {{ (queryData.currPage - 1) * queryData.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>

                <el-table-column label="昵称" align="center">
                    <template #default="scope">
                        <div class="nickname">
                            {{ scope.row.nickname }}
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="头像" align="center" width="120">
                    <template #default="scope">
                        <div class="user-avatar">
                            <img :src="scope.row.avatar">
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="个性签名" align="center" width="300">
                    <template #default="scope">
                        <div class="user-bio">
                            {{ scope.row.bio }}
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="个人网站" align="center" width="200">
                    <template #default="scope">
                        <el-tag><a class="site-link" target="_blank" :href="scope.row.website">{{ scope.row.website
                        }}</a></el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="是否可用" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.disabled" 
                        v-if="!scope.row.isAdmin"
                        :disabled = "scope.row.isAdmin && userStore.userInfo && userStore.userInfo.isAdmin != 1"
                        :active-value="0" :inactive-value="1"
                            @change="handleChange(scope.row)" active-color="#13ce66" inactive-color="#eaecf0">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="创建时间" prop="createTime" align="center" width="180"></el-table-column>

                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="primary" @click="openUserEditDialog(scope.row)" v-if="scope.row.isAdmin != 1 || userStore.userInfo && userStore.userInfo.isAdmin == 1">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <Pagination :total-count="totalCount" :get-page="changeCurrentPage" />
        <el-dialog v-model="userDialogVisible" :close-on-click-modal="false"  width="450">
            <el-form :model="userForm" :rules="userFormRules" label-width="80">
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="userForm.nickname" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="avatar">
                    <avatar-upload v-model="userForm.avatar" />
                </el-form-item>
                <el-form-item label="个性签名" prop="bio">
                    <el-scrollbar>
                        <el-input type="textarea" :rows="3" v-model="userForm.bio" style="width: 300px;"></el-input>
                    </el-scrollbar>
                </el-form-item>
                <el-form-item label="网站链接" prop="website">
                    <el-input v-model="userForm.website" style="width: 300px;"></el-input>
                </el-form-item>
                <el-form-item label="是否可用" v-if="!userForm.isAdmin" prop="disabled">
                    <el-switch v-model="userForm.disabled"
                         :active-value="0" :inactive-value="1" active-color="#13ce66"
                        inactive-color="#eaecf0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="角色">
                    <el-checkbox-group v-model="userForm.roleIdList">
                      <el-checkbox :label="roleOption.id" v-for="roleOption in roleOptionList" :key="roleOption.id">{{ roleOption.roleName }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <div style="margin-left: auto;">
                        <el-button @click="userDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleSave">确定</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'user'
}
</script>
<script setup>
import AvatarUpload from '@/components/AvatarUpload.vue'
import Pagination from '@/components/Pagination.vue'
import { queryUserPage, enableUser,updateUser } from '@/api/userApi'
import { queryRoleList } from '@/api/roleApi'
import { ref, reactive, onMounted, computed,nextTick } from 'vue'
import Messager from '@/utils/messager'
import useUserStore from '@/store/user'

const userStore = useUserStore()

// 表格相关数据
let tableData = ref([])
let totalCount = ref(0)
// 查询参数
const queryData = reactive({
    pageSize: 10,
    currPage: 1,
    data: {
        startTime: null,
        endTime: null,
        nickname: ''
    }
})

// 用户表格加载动画 
let tableLoading = ref(true)

// 获取用户分页列表
function getUserPage() {
    tableLoading.value = true
    queryUserPage(queryData).then(res => {
        tableLoading.value = false
        /* let list = []
        for (let i = 0; i < 12; i++) {
            list.push(JSON.parse(JSON.stringify(res.list[0])))
        }
        tableData.value = list */
        tableData.value = res.list
        totalCount.value = res.totalCount
    })
}
onMounted(() => {
    getUserPage()
})

// 启用/禁用用户
function handleChange(row) {
    enableUser({ userInfoId: row.id, disabled: row.disabled }).then(() => {
        if (row.disabled == 0) {
            Messager.ok(`启用成功`)
        } else {
            Messager.warn('该用户已被禁用')
        }
    }).catch(err=>{
        row.disabled = row.disabled == 1? 0 : 1
    })
}

// 查询表表单重置
function resetForm() {
    queryData.data = {
        startTime: null,
        endTime: null,
        nickname: ''
    }
    changeCurrentPage(1)
}

// 点击分页按钮查询指定分页
function changeCurrentPage(currPage) {
    queryData.currPage = currPage
    getUserPage()
}

// 用户弹框表单内容
const userDialogVisible = ref(false)
const userForm = ref({})
const userFormRules = {
    nickname: [
        { required: true, message: '昵称不能为空哦', trigger: 'blur' }
    ]
}

const roleOptionList = ref([])
// 打开用户编辑弹框
function openUserEditDialog(data) {
    /* nextTick(()=>{
        console.log('nextTick1');
    }) */
    queryRoleList().then(res=>{
        roleOptionList.value = res
        // console.log('queryRoleList finished');
    })
    /* nextTick(()=>{
        console.log('nextTick2');
    }) */
    userDialogVisible.value = true
    userForm.value = JSON.parse(JSON.stringify(data))
    /* nextTick(()=>{
        console.log('nextTick3');
    }) */
}

function handleSave() {
    updateUser(userForm.value).then(res=>{
        userDialogVisible.value = false
        Messager.ok('保存成功')
        userStore.getUserInfo()
        getUserPage()
    })
}

</script>

<style lang="scss" scoped>
.user-avatar {
    width: 100%;
    height: 100%;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

.el-form--inline .el-form-item {
    margin-right: 0;
}

a.site-link {
    color: #409eff;
}

.user-bio {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.el-form-item-time {
    width: 248px;
}

::v-deep .el-form-item-time .el-form-item__content {
    flex-wrap: nowrap;
}

span.h-line {
    color: #ccc;
    margin: 0 5px;
}

.nickname {
    text-overflow: ellipsis;
    white-space: nowrap;
    /* white-space属性为nowrap时，不会因为超出容器宽度而发生换行 */
    overflow: hidden;
}

::v-deep textarea {
    resize: none !important;
}
</style>
